<layout:basic/>

<component:application.module.admin.library.component.Datatable id="rolelist" title="角色列表" width="12">
    <button id="addmenu" class="btn btn-default"><i class="fa fa-plus"></i> 添加角色</button>
    <button id="refreshmenu" class="btn btn-default"><i class="fa fa-refresh"></i> 刷新列表</button>
</component:application.module.admin.library.component.Datatable>

<div id="mlModal" style="display: none">
    <form class="form-horizontal" role="form" id="mlForm">
        <div class="form-group">
            <label class="col-sm-3 control-label">名称</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" name="name">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">启用</label>
            <div class="col-sm-5">
                <select class="form-control" name="disable">
                    <option value="0" data-default>启用</option>
                    <option value="1">禁用</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">父ID</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" name="pid" data-default="0">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">备注</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" name="comment">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">排序</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" name="orderNo" data-default="0">
            </div>
        </div>
    </form>
</div>
<script>
    $(function () {
        var page = (function () {
            return {
                selector: {
                    /** 选择器 */
                    modal: "#mlModal",
                    table: "#rolelist",
                    form: "#mlForm",
                    /** 事件触发器 */
                    trigger: {
                        /** 表格外部*/
                        add: "#addmenu",
                        refresh: "#refreshmenu",
                        /** 表格内部：元素直接相关 */
                        update: ".act-update",
                        remove: ".act-delete"
                    }
                },
                modalOptions: {
                    title: "添加角色"
                },
                tableOptions: [
                    {
                        title: '角色ID',
                        data: 'id',
                        width: "2%"
                    },
                    {
                        title: '角色名称',
                        data: 'name',
                        width: "6%"
                    },
                    {
                        title: '备注',
                        data: 'comment',
                        width: "6%"
                    },
                    {
                        title: '启用情况',
                        data: function (row) {
                            switch (parseInt(row.disable)) {
                                case 0:
                                    return "启用";
                                    break;
                                case 1:
                                    return "禁用";
                                    break;
                                default:
                                    return " * " + row.disable + " * ";
                            }
                        },
                        width: "6%"
                    },
                    {
                        title: '排序',
                        data: 'orderNo',
                        width: "6%"
                    },
                    {
                        title: '父角色ID',
                        data: 'pid',
                        width: "4%"
                    }, {
                        title: '操作',
                        data: function (row) {
                            /*"<button class='btn btn-default btn-xs act-update'>修改</button> " +*/
                            return "<button class='btn btn-default btn-xs act-edit-name'>修改名称</button> " +
                                "<button class='btn btn-primary btn-xs act-edit-comment'>修改备注</button> " +
                                (parseInt(row.disable) !== 0 ?
                                    "<button class='btn btn-danger btn-xs act-enable'>启用</button>" :
                                    "<button class='btn btn-danger btn-xs act-disable'>禁用</button>");
                        },
                        width: "16%"
                    }
                ],
                url: {
                    /** 增删改查URL地址 */
                    update: "__PUBLIC__/admin/role/update",
                    remove: "__PUBLIC__/admin/role/delete",
                    refresh: "__PUBLIC__/admin/role/getlist",
                    add: "__PUBLIC__/admin/role/add"
                },
                onclick: {
                    ".act-edit-name": function (ele, dtables) {
                        var row = ele.closest("tr");
                        var data = dtables.data(row);
                        console.log(ele, data);
                        return layer.prompt({title: '修改权限名称', formType: 0, value: data.name}, function (text, index) {
                            $.get("__PUBLIC__/admin/role/updatename", {
                                id: data.id,
                                name: encodeURI(text)
                            }, function (res) {
                                if (res.status) {
                                    dtables.update(res.data, row);
                                    layer.close(index);
                                } else {
                                    return layer.msg(res.message);
                                }
                            });
                        });
                    },
                    ".act-edit-comment": function (ele, dtables) {
                        var row = ele.closest("tr");
                        var data = dtables.data(row);
                        console.log(ele, data);
                        return layer.prompt({
                            title: '修改权限备注',
                            formType: 2,
                            value: data.comment
                        }, function (text, index) {
                            $.get("__PUBLIC__/admin/role/updatecomment", {
                                id: data.id,
                                comment: encodeURI(text)
                            }, function (res) {
                                if (res.status) {
                                    dtables.update(res.data, row);
                                    layer.close(index);
                                } else {
                                    return layer.msg(res.message);
                                }
                            });
                        });
                    },
                    ".act-enable": function (ele, dtables) {
                        var row = ele.closest("tr");
                        var data = dtables.data(row);
                        console.log(ele, data);
                        $.get("__PUBLIC__/admin/role/enable", {
                            id: data.id
                        }, function (res) {
                            if (res.status) {
                                dtables.update(res.data, row);
                            } else {
                                return layer.msg(res.message);
                            }
                        });
                    },
                    ".act-disable": function (ele, dtables) {
                        var row = ele.closest("tr");
                        var data = dtables.data(row);
                        console.log(ele, data);
                        $.get("__PUBLIC__/admin/role/disable", {
                            id: data.id
                        }, function (res) {
                            if (res.status) {
                                dtables.update(res.data, row);
                            } else {
                                return layer.msg(res.message);
                            }
                        });
                    }
                }
            };
        })();
        isea.bundle.init("table", page);
    });
</script>
